<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import * as echarts from 'echarts';
import MoveMouse from "@/components/moveMouse.vue";
import PayAttention from "@/components/components/payAttention.vue";
import UserInformation from "@/components/components/userInformation.vue";

const xData = ref(['asdasdasdasd', '同学2', '同学3', '同学4', '同学5', '同学6', '同学7', '同学8', '同学9', '同学10'])
const yData = ref([123, 332, 123, 332, 423, 432, 123, 321, 432, 543])
const ifCheckDetailForRateTable = ref(false)
let myChart = null
const msg = ref('null')
const showDetailOfRate = (item) => {
  ifCheckDetailForRateTable.value = true
  console.log("in触发")
  msg.value = item
}
onMounted(() => {
  myChart = echarts.init(document.getElementById('chart1'));
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: xData.value
    },
    axisLabel: {
      formatter: function (value) {
        if (value.length > 10) {
          return value.substr(0, 5) + '...';
        } else {
          return value;
        }
      }
    },
    yAxis: {},
    series: [
      {
        name: 'rate',
        type: 'bar',
        data: yData.value
      }
    ]
  });

  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  // 移除监听
  window.removeEventListener('resize', resizeChart);
});

const resizeChart = () => {
  if (myChart) {
    myChart.resize();
  }
}

</script>

<template>
  <body>
    <div class="dr">
      <div class="downOutLoad">
        <div class="outline">
          <div id="chart1" class="chart"></div>
        </div>
        <table class="table" border="1">
          <thead>
          <tr>
            <th>
              <h3 style="margin: 0">#</h3>
            </th>
            <th>
              <h3 style="margin: 0">User</h3>
            </th>
            <th>
              <h3 style="margin: 0">Rate</h3>
            </th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in xData" :key="index" @mouseenter="showDetailOfRate(item)" @mouseleave="ifCheckDetailForRateTable=false; console.log('out触发')">
              <td>{{index + 1}}</td>
              <td>{{item}}</td>
              <td>rate</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="downright">
        <pay-attention class="ri"></pay-attention>
        <user-information class="ri"></user-information>
        <move-mouse v-if="ifCheckDetailForRateTable">
          <user-information class="ddui" :name="msg"></user-information>
        </move-mouse>
      </div>
    </div>

  </body>
</template>

<style scoped>
.dr{
  width: 100%;
  display: flex;
  .outline{

    .chart {
      text-align: center;
      width: 70vw;
      height: 40vh;
    }
  }
  .downOutLoad{
    width: 70vw;
    .table{
      position: relative;
      text-align: center;
      width: 100%;
      color: #5C7BD9;
      z-index: 100;
      td{
        height: 5vh;
      }
      tr{
       &:hover{
         color: #abcdef;
         transition: 0.2s;
       }
      }
    }
  }
  .downright{
    width: 30vw;

    .ri{
      margin: 5%;
      width: 90%;
    }
  }
}
.ddui{
  width: 20vw;
  z-index: -1;
}

</style>